<template>
    <view class="back_F7FAFF">
        <z-paging ref="paging" v-model="list" @query="queryList">
            <view slot="top">
                <view class="home-back">
                    <!-- 导航 -->
                    <view class="title-box">
                        <view class="state-box" :style="{ height: statusBarHeight + 'px' }"></view>
                        <view class="flex flex_column py_32 h_88 justify_content_center">
                            <view class="f_32 cl_00091A" style="display: flex;align-items: center;">
								<view style="margin-top: 10rpx;margin-right: 10rpx;"  @click="go_back()">
									<image class="img_40 leftImg" src="../../static/imgs/1111/left.png" mode=""></image>
								</view>
                                <text class="boldTtf">消息</text>
                                <image class="img_40 ml_16" style="vertical-align: middle" :src="url + 'imgs/icon_qc.png'" mode="widthFix"></image>
                                <text class="f_24 cl_00091A" @click="ClearUnread">清除未读</text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>

            <scroll-view scroll-y="true" class="box">
                <!-- 列表 -->
                <view class="back_fff br_24 p_32">
                    <!-- 系统通知 -->
                    <view class="flex u-flex-wrap justify_content_between line_F7FAFF pb_24 pt_24" @click="notice">
                        <view style="width: 96rpx; height: 96rpx; border-radius: 50%; overflow: hidden">
                            <image style="width: 96rpx; height: 96rpx; background-color: #eeeeee" src="@/static/imgs/img.png" mode="heightFix"></image>
                        </view>
                        <view style="width: 65%">
                            <text class="f_28">系统通知</text>
                            <br />
                            <text class="message f_28 mt_16 cl_999CA3">系统通知</text>
                        </view>
                        <view>
                            <text class="f_24 cl_CCCED1 sendTime">刚刚</text>
                            <!-- <view class="cl_fff f_20 mt_16 number" v-if="item.number > 0">{{ item.number }}</view> -->
                        </view>
                    </view>
                    <!-- 聊天 -->
                    <view v-for="item in list" class="flex u-flex-wrap justify_content_between line_F7FAFF pb_24 pt_24" @click="msg">
                        <view style="width: 96rpx; height: 96rpx; border-radius: 50%; overflow: hidden">
                            <image style="width: 96rpx; height: 96rpx; background-color: #eeeeee" :src="item.img" mode="heightFix"></image>
                        </view>
                        <view style="width: 65%">
                            <text class="f_28">{{ item.name }}</text>
                            <text class="message f_28 mt_16 cl_999CA3">{{ item.text }}</text>
                        </view>
                        <view>
                            <text class="f_24 cl_CCCED1 sendTime">{{ item.time }}</text>
                            <view class="cl_fff f_20 mt_16 number" v-if="item.number > 0">{{ item.number }}</view>
                        </view>
                    </view>
                </view>
            </scroll-view>
        </z-paging>
    </view>
</template>

<script>
export default {
    data() {
        return {
            statusBarHeight: 0,
            windowHeight: 0,
            list: [],
            url: ''
        };
    },
    onShow() {
        this.url = this.baseUrl;
    },
    onLoad() {
        // 获取状态栏高度
        const than = this;
        uni.getSystemInfo({
            success(res) {
                than.statusBarHeight = res.statusBarHeight;
                // 默认px,转成rpx
                than.windowHeight = res.screenHeight * (750 / res.windowWidth) - 100;
            }
        });
        this.getList();
    },
    methods: {
        isRouter(url) {
            this.$api.auth(url);
        },
		go_back(){
			uni.navigateBack(1)
		},
        // 清除未读
        ClearUnread() {
            for (var i = 0; i < this.list.length; i++) {
                console.log(this.list[i].number);
                this.list[i].number = 0;
            }
        },
        // 聊天
        msg() {
            uni.navigateTo({
                url: '/pages/msg/msg'
            });
        },
        // 系统通知
        notice() {
            uni.navigateTo({
                url: '/pages/msg/notice'
            });
        },
        // pageNo 页数 pageSize 单页显示数量
        queryList(pageNo, pageSize) {
            //模拟数据
            let list = [
                {
                    img: '@/static/imgs/headImg.png',
                    name: '同路仁用户',
                    text: '亲，这个商品只剩一件了哦，喜欢尽快拍下',
                    number: '99',
                    time: '刚刚'
                },
                {
                    img: '@/static/imgs/headImg.png',
                    name: '同路仁用户1',
                    text: '亲，这个商品只剩一件了哦，喜欢尽快拍下',
                    number: '9',
                    time: '5分钟前'
                },
                {
                    img: '@/static/imgs/headImg.png',
                    name: '同路仁用户1',
                    text: '亲，这个商品只剩一件了哦，喜欢尽快拍下',
                    number: '9',
                    time: '5分钟前'
                },
                {
                    img: '@/static/imgs/headImg.png',
                    name: '同路仁用户1',
                    text: '亲，这个商品只剩一件了哦，喜欢尽快拍下',
                    number: '9',
                    time: '15分钟前'
                },
                {
                    img: '@/static/imgs/headImg.png',
                    name: '同路仁用户',
                    text: '亲，这个商品只剩一件了哦，喜欢尽快拍下',
                    number: '99',
                    time: '3分钟前'
                }
            ];
            this.$refs.paging.complete(list);
            // 分页停止
            if (pageNo >= 5) {
                this.$refs.paging.complete(false);
            }
        },
        // 重新加载分页
        reload() {
            this.$refs.paging.reload();
        }
    }
};
</script>

<style scoped lang="scss">
.home-back {
    width: 750rpx;
    height: 220rpx;
    position: relative;
    background: #f7faff;
    .title-box {
        position: fixed;
        left: 0;
        top: 0;
        z-index: 4;

        .state-box {
            width: 750rpx;
        }
    }
}
.box {
    height: calc(100vh - 220rpx);
    background-color: #fff;
    border-radius: 24rpx 24rpx 0 0;
    overflow: hidden;
}
.message {
    display: inline-block;
    white-space: nowrap;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.number {
    display: inline-block;
    background: #ff6401;
    border-radius: 20px;
    padding: 4rpx 12rpx;
    text-align: center;
    float: right;
}
.sendTime {
    display: block;
}

</style>
